<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>播放器</title>
    <style type="text/css">
      html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
      body {display:flex;}
      #mse {flex:auto;}
    </style>
    <link rel="stylesheet" href="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.css">
    <script type="text/javascript">
        document.addEventListener('ready', () => {
          const resizeObserver = new ResizeObserver(() => {
            document.getElementById('mse').style.height = document.body.clientHeight + 'px'
          })
          resizeObserver.observe(document.body)
        })
    </script>
  </head>
  <body>
    <div id="mse"></div>
    <script src="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.js" charset="utf-8"></script>
    <script src="https://unpkg.byted-static.com/xgplayer-hls/3.0.10/dist/index.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      let player = new window.Player({
          id: 'mse',
          url: '视频链接',
          isLive: true,
          autoplay: true,
          playsinline: true,
          height: window.innerHeight,
          width: window.innerWidth,
          plugins: [window.HlsLivePlayer]
      });
    </script>
  </body>
</html>
